<script setup>
import { reactive, ref} from "vue"
import { User, Lock, Message } from '@element-plus/icons-vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";
import config from "../../config";

  const loginData = reactive({})
  const rules = reactive({
    username: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 20, message: '密码长度在3-20位之间', trigger: 'blur' },
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { min: 3, max: 20, message: '密码长度在3-20位之间', trigger: 'blur' },
    ],
  })
  const ruleFormRef = ref()
  const register = () => {
    ruleFormRef.value.validate(valid => {
      if (valid) {
        if (loginData.password !== loginData.confirmPassword) {
          ElMessage.warning('两次密码不一致')
        }
		loginData.role = 'FAMILYMEMBER'
        // 发送表单数据给后台
        request.post('/register', loginData).then(res => {
          if (res.code === '200') {
            ElMessage.success('注册成功')
            router.push('/login')
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }

</script>

<template>
  <div class="wrapper">
    <div style="margin: 100px auto; background-color: #ffffff; width: 500px; height: 600px; padding: 20px;">
      <div style="margin: 20px 0; text-align: center; font-size: 24px;color: #87CEEB;"><b>{{config.projectName}} | 家属注册</b></div>
      <el-form
              ref="ruleFormRef"
              :model="loginData"
              :rules="rules"
              size="large"
              status-icon
      >
        <el-form-item prop="username">
          <span style="color: #87CEEB;">请输入手机号码：</span>
          <el-input v-model="loginData.username" placeholder="请输入手机号码"  />
        </el-form-item>
        <el-form-item prop="email">
          <span style="color: #87CEEB;">请输入邮箱：</span>
          <el-input v-model="loginData.email" placeholder="请输入邮箱"  />
        </el-form-item>
        <el-form-item prop="password">
          <span style="color: #87CEEB;">请输入密码：</span>
          <el-input v-model="loginData.password" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <span style="color: #87CEEB;">请确认密码：</span>
          <el-input v-model="loginData.confirmPassword" show-password placeholder="请确认密码"/>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: right">
          <el-button type="primary" autocomplete="off" @click="register">注册</el-button>
          <el-button autocomplete="off" @click="router.push('/login')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
.wrapper {
  background-image: url("../assets/系统背景.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 使背景图片完全覆盖整个容器 */
  background-position: center center; /* 使背景图片居中 */
  height: 100vh; /* 容器高度占满视口高度 */
  overflow: hidden;
}

  .el-form-item.is-error .el-input__inner{
    border-color: #ffffff;
  }
  .el-form-item.is-error .el-input__validateIcon{
    color: #ffffff;
  }
  .el-form-item__error{
    color: #ffffff;
  }
</style>
